<template>
    <el-dialog v-model="show" @open="handleOpen" @close="handleClose">
        <div class="bind-dialog" >
            <div class="title">绑定用户信息</div>
            <el-form class="bind-form" ref="formRef" :model="formData" :rules="rules" @submit.prevent="handleBut">
                <el-form-item prop="user_name" required>
                    <div class="item-text">绑定账户名称:</div>
                    <el-input v-model="formData.user_name" class="bind-input" placeholder="请输入绑定账户名称"/>
                </el-form-item>
                <el-form-item prop="pass_word" required>
                    <div class="item-text">绑定账户密码:</div>
                    <el-input v-model="formData.pass_word" class="bind-input" placeholder="请输入绑定账户密码"/>
                </el-form-item>

                <el-form-item>
                    <el-button class="but1" @click="handleBut">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>
<script setup>
const show = defineModel({ type: Boolean })
const formData = ref({
  user_name: '',
  pass_word: ''
})
const emit = defineEmits(['bindData'])
const formRef = ref(null)
const rules = ref({
    user_name: [{ required: true, message: '请输入绑定账户名称', trigger: 'blur' },],
    pass_word: [{ required: true, message: '请输入绑定账户密码', trigger: 'blur' },]
})

const handleBut = () =>{
    formRef.value.validate((valid) => {
    if (valid) {
      // 校验通过后，触发父组件的事件，传递数据
      emit('bindData', formData.value)
      // 关闭对话框
    } else {
      console.log('表单校验失败')
    }
  })
}

const handleClose = () => {
    formData.value = {
        user_name: '',
        pass_word: ''
    }
    formRef.value.resetFields()
    show.value = false
}
</script>
<style lang='scss' scoped>
.bind-dialog{
    height: 300px;
}
.title{
    font-size: 18px;
    color: #000;
    margin: 10px 0 0 20px;
    font-weight: 600;
}
.bind-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
}
.item-text{
    font-size: 16px;
    color: #000;
}
.bind-input{
    width: 300px;
    margin-left: 10px;
}
:deep(.bind-input .el-input__wrapper){
    background-color: #fff;
    border: 1px solid #ebebeb;
}
.but1{
    margin-top: 30px;
    width: 60px;
    height: 32px;
    background-color: #e92937;
    color: #fff;
  
}
.bind-dialog .el-form-item__error{
    left: 110px
}
</style>